<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表渲染练习</title>
</head>
<script src="./js/react.development.js"></script>
<script src="./js/react-dom.development.js"></script>
<!-- 引入 babel  将jsx语法 转换为 js语法 -->
<script src="./js/babel.min.js"></script>
<style>
	*{
		margin: 0;
		padding: 0;
	}
	.song{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-evenly;
		list-style: none;
		text-align: center;

	}
	.sing{
		width: 250px;
		height: 150px;
	}
</style>
<body>
    <div id="root"></div>
</body>
<script type="text/babel">
    //MV 数据
    let mv = [
        {
		"id": 5334103,
		"cover": "http://p1.music.126.net/G09rskU97H10HPPowgUIng==/1426066593488734.jpg",
		"name": "温暖你的冬 录音花絮2",
		"playCount": 61787,
		"briefDesc": null,
		"desc": null,
		"artistName": "欧阳娜娜",
		"artistId": 1087140,
		"duration": 146470,
		"mark": 0,
		"subed": false,
		"artists": [{
			"id": 1087140,
			"name": "欧阳娜娜",
			"alias": ["Nana Ou-yang", "娜比"],
			"transNames": null
		}]
	}, {
		"id": 10928981,
		"cover": "http://p1.music.126.net/Sacm9rVUjFIagBJ3KLfVHw==/109951164920088043.jpg",
		"name": "BilalTallanma",
		"playCount": 170126,
		"briefDesc": null,
		"desc": null,
		"artistName": "Bilal Enwer",
		"artistId": 1039011,
		"duration": 1455000,
		"mark": 0,
		"subed": false,
		"artists": [{
			"id": 1039011,
			"name": "Bilal Enwer",
			"alias": [],
			"transNames": null
		}]
	}, {
		"id": 10880673,
		"cover": "http://p1.music.126.net/jvHGykRirEXz1hzqNEnPCA==/109951164240795974.jpg",
		"name": "起风了",
		"playCount": 6033623,
		"briefDesc": "吴青峰热单《起风了》MV公开！",
		"desc": null,
		"artistName": "吴青峰",
		"artistId": 187229,
		"duration": 303000,
		"mark": 0,
		"subed": false,
		"artists": [{
			"id": 187229,
			"name": "吴青峰",
			"alias": ["可人儿", "吴啾咪", "Greeny"],
			"transNames": null
		}]
	}, {
		"id": 10929612,
		"cover": "http://p1.music.126.net/x9oKLgPzfqKbwExhd1RmRA==/109951164922321089.jpg",
		"name": "덤더럼 (Dumhdurum) | SBS人气歌谣 20/04/19 现场版",
		"playCount": 95710,
		"briefDesc": null,
		"desc": null,
		"artistName": "Apink",
		"artistId": 126277,
		"duration": 226000,
		"mark": 0,
		"subed": false,
		"artists": [{
			"id": 126277,
			"name": "Apink",
			"alias": ["에이핑크", "A pink", "阿粉"],
			"transNames": ["에이핑크"]
		}]
	}, {
		"id": 10862189,
		"cover": "http://p1.music.126.net/rHAgVJmMnIfFTry6W9tJmw==/109951163962637943.jpg",
		"name": "上学威龙",
		"playCount": 4757901,
		"briefDesc": null,
		"desc": null,
		"artistName": "法老",
		"artistId": 865007,
		"duration": 214000,
		"mark": 0,
		"subed": false,
		"artists": [{
			"id": 865007,
			"name": "法老",
			"alias": [],
			"transNames": null
		}]
	}, {
		"id": 10862160,
		"cover": "http://p1.music.126.net/H6wSPKjK54lkw0ZJFBIa8Q==/109951163962253077.jpg",
		"name": "bad guy",
		"playCount": 17694915,
		"briefDesc": null,
		"desc": null,
		"artistName": "Billie Eilish",
		"artistId": 11972054,
		"duration": 205000,
		"mark": 0,
		"subed": false,
		"artists": [{
			"id": 11972054,
			"name": "Billie Eilish",
			"alias": ["碧梨", "Billie Eilish Pirate Baird O'Connell"],
			"transNames": ["比莉·艾利什"]
		}]
	}, {
		"id": 10919322,
		"cover": "http://p1.music.126.net/ZQ-gtRQ9V62nsMV9HKfweg==/109951164771170702.jpg",
		"name": "BTS (방탄소년단) 'Black Swan' Official MV",
		"playCount": 1945495,
		"briefDesc": null,
		"desc": null,
		"artistName": "BTS (防弹少年团)",
		"artistId": 783124,
		"duration": 217000,
		"mark": 0,
		"subed": false,
		"artists": [{
			"id": 783124,
			"name": "BTS (防弹少年团)",
			"alias": ["방탄소년단", "BTS", "Bangtan Boys", "胖蛋", "防弹少年团", "bts 防弹少年团"],
			"transNames": null
		}]
	}, {
		"id": 5617045,
		"cover": "http://p1.music.126.net/AeqFssNiKB-aKodmx-KhUw==/18793952255574830.jpg",
		"name": "Ablikim-Ablimit ( Talwa Qiz )",
		"playCount": 466199,
		"briefDesc": null,
		"desc": null,
		"artistName": "Ablikim Ablimit",
		"artistId": 12118166,
		"duration": 251030,
		"mark": 0,
		"subed": false,
		"artists": [{
			"id": 12118166,
			"name": "Ablikim Ablimit",
			"alias": null,
			"transNames": null
		}]
	}, {
		"id": 10929390,
		"cover": "http://p1.music.126.net/2cXJJRroBgy2wULzQ0SQlg==/109951165923968787.jpg",
		"name": "Wheels on the Bus",
		"playCount": 178364,
		"briefDesc": null,
		"desc": null,
		"artistName": "斑马儿歌",
		"artistId": 35229524,
		"duration": 152000,
		"mark": 0,
		"subed": false,
		"artists": [{
			"id": 35229524,
			"name": "斑马儿歌",
			"alias": [],
			"transNames": null
		}]
	}, {
		"id": 5696012,
		"cover": "http://p1.music.126.net/EknvVEOf8QZos6dwMOWO-w==/109951163053400031.jpg",
		"name": "Uyghur kizi",
		"playCount": 845514,
		"briefDesc": null,
		"desc": null,
		"artistName": "Abdugini Ablikim",
		"artistId": 12038158,
		"duration": 188290,
		"mark": 0,
		"subed": false,
		"artists": [{
			"id": 12038158,
			"name": "Abdugini Ablikim",
			"alias": null,
			"transNames": null
		}]
	}, {
		"id": 10929614,
		"cover": "http://p1.music.126.net/Rp-IJ6LpijaP1lptAVuCOw==/109951167725323260.jpg",
		"name": "Oh my god | MBC音乐中心 20/04/18 现场版",
		"playCount": 61365,
		"briefDesc": null,
		"desc": null,
		"artistName": "(G)I-DLE",
		"artistId": 14055085,
		"duration": 200000,
		"mark": 0,
		"subed": false,
		"artists": [{
			"id": 14055085,
			"name": "(G)I-DLE",
			"alias": ["(여자)아이들", "Cube新女团", "女孩子", "女孩子们", "여자 아이들", "女娃", "gidle"],
			"transNames": null
		}]
	}, {
		"id": 10894787,
		"cover": "http://p1.music.126.net/GdOK2X9pAIU3YroZkHHA0w==/109951164417513957.jpg",
		"name": "Phoenix 涅槃 (英雄联盟2019全球总决赛主题曲)",
		"playCount": 5633378,
		"briefDesc": null,
		"desc": null,
		"artistName": "Cailin Russo",
		"artistId": 12334074,
		"duration": 208000,
		"mark": 0,
		"subed": false,
		"artists": [{
			"id": 12334074,
			"name": "Cailin Russo",
			"alias": [],
			"transNames": null
		}, {
			"id": 964410,
			"name": "Chrissy Costanza",
			"alias": [],
			"transNames": null
		}, {
			"id": 1047337,
			"name": "英雄联盟",
			"alias": ["英雄联盟", "撸啊撸", "lol", "League of Legends"],
			"transNames": null
		}]
	}, {
		"id": 10929578,
		"cover": "http://p1.music.126.net/o9Rh84cpIF8BpnGyJTW2gA==/109951165526929399.jpg",
		"name": "Verde",
		"playCount": 20284,
		"briefDesc": null,
		"desc": null,
		"artistName": "J. Balvin",
		"artistId": 309127,
		"duration": 250000,
		"mark": 0,
		"subed": false,
		"artists": [{
			"id": 309127,
			"name": "J. Balvin",
			"alias": ["J Balvin", "j balvin"],
			"transNames": null
		}, {
			"id": 999423,
			"name": "Sky",
			"alias": ["soft rock /classical band", "soft rock /classical band"],
			"transNames": null
		}]
	}, {
		"id": 462450,
		"cover": "http://p1.music.126.net/NZSgYJrX1zgOGTP10oqv1g==/7888995930490851.jpg",
		"name": "Counting Sheep (Official Video)",
		"playCount": 6972242,
		"briefDesc": null,
		"desc": null,
		"artistName": "SAFIA",
		"artistId": 986155,
		"duration": 173080,
		"mark": 0,
		"subed": false,
		"artists": [{
			"id": 986155,
			"name": "SAFIA",
			"alias": [],
			"transNames": null
		}]
	}, {
		"id": 5336769,
		"cover": "http://p1.music.126.net/BRNTmHJI0SilrYPm2t_TMA==/3251255892352165.jpg",
		"name": "小学生广播体操七彩阳光",
		"playCount": 1235198,
		"briefDesc": null,
		"desc": null,
		"artistName": "群星",
		"artistId": 122455,
		"duration": 281920,
		"mark": 0,
		"subed": false,
		"artists": [{
			"id": 122455,
			"name": "群星",
			"alias": ["原声带", "Various Artists", "华语群星"],
			"transNames": null
		}]
		
	}]
	
    let vdom = <ul className="song">
		{
			mv.map((iteam)=>{
				return <li key={iteam.id}>
					<img className="sing" src={iteam.cover} alt=""/>
					<h3>{ iteam.name.length>10?iteam.name.slice(0,3)+'...':iteam.name}</h3>
					<h3>{iteam.artistName}</h3>
					
					</li>

			})
		}
	</ul>
	ReactDOM.render(vdom, document.getElementById("root"))
</script>
</html>